<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/selecter.css">
</head>
<body>
    
    <h1>标签选择器</h1>
        <dev>泥嚎</dev>
    <h1>类选择器</h1>
        <p class="green">大春</p>
        <p class="yellow">初夏</p>
        <p class="red">秋分</p>
        <p class="blue big">冬至</p>
    <h1>id选择器</h1>
        <p id="id1">id白</p>
    <h1>通配符选择器</h1>
        <p></p>
    <br>
    <br>
    <br>
    <h1>关系选择器</h1>
    <div class="header">
        <div class="nav">
            <a href="#">首页</a>
            <a href="#">关于</a>
            <a href="#">联系</a>
        </div>
    </div>
    <h1>子代选择器</h1>
    <div class="zidai">
        <p>泥嚎 我是儿子</p>
        <span>
            <p>泥嚎 我是孙子</p>
        </span>
    </div>

    <h1>邻接兄弟选择器test1</h1>
        <p>泥嚎我是近兄弟</p>
        <p>泥嚎我是远亲</p>
        <p>泥嚎我不嚎</p>
    </div>

    <h1>邻接兄弟选择器test2</h1>
    <div class="linjie">
        <p>泥嚎</p>
        <p>泥嚎</p>
        <p>泥嚎</p>
    </div>

    <h2>通用兄弟选择器</h2>

        <p>泥嚎</p>
        <p>泥嚎</p>
        <p>泥嚎</p>

    <h1>分组选择器</h1>

    <div class = "group1">
        <p>泥嚎1</p>
    </div>

    <div class = "group2">
        <p>泥嚎2</p>
    </div>  

    <h1>伪类选择器</h1>
    <h2>链接伪类</h2>
    <div class="b">
       <a href="https://www.bilibili.com/">哔站</a>
    </div>
    <h2>用户行为伪类</h2>
    <div class="boxWEILEI">
        <p>你好<p>
    </div>
    <div class="boxWEILEI2">
        <input type="text">
    </div> 
    <h2>结构伪类</h2>
    <ul class = "ul1WEILEI">

        <li>1泥嚎</li>
        <li>2泥嚎</li>
        <li>3泥嚎</li>
        <li>4泥嚎</li>
    </ul>
    <br>
    <ul class = "ul2WEILEI">

        <li>1泥嚎</li>
        <li>2泥嚎</li>
        <li>3泥嚎</li>
        <li>4泥嚎</li>
        <li>5泥嚎</li>
        <li>6泥嚎</li>
        <li>7泥嚎</li>
    </ul>
    <table class = "tableWEILEI"> 
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
    <h2>表单伪类</h2>
    <form class = "formWEILEI"> 
        <button disabled>提交</button>
        <br>
        <input type = "checkbox" id="checked">
        <label for="checked">我已经同意所有需求LOL</label>
    </form>
    <h1>伪元素选择器</h1>
    <div class="WEIYUANSU"> 
        <p>泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎泥嚎</p>
        <br>
        <input type="text" placeholder="请输入">
        <br></br>
        <span>芜柒</span>
    </div>

    <h1>属性选择器</h1>
    <div class="SHUXING"> 
        <input type="text" class="class1">
        <input type="password">
    </div>



</body>
</html>

